<template>
    <div>
        <CssStyle>
            <div class="a">插槽里定制</div>
        </CssStyle>

        <!-- $style 是module 的默认值 -->
        <div :class="$style.dd">
            model style 的写法
        </div>
        <!-- 多个：数组形式 -->
        <div :class="[$style.dd, $style.border]">
            model style 的写法2
        </div>
        <div :class="zs.dd">
            model style 的写法3
        </div>
        <div :class="[zs.dd, zs.border]">
            model style 的写法4
        </div>
    </div>
</template>

<script setup lang="ts">
import CssStyle from './CssStyle/index.vue'
// css hooks的使用， 一般可以在 写tsx 的使用
import { useCssModule } from 'vue';
const css = useCssModule()     // 默认module
console.log(css);

const csszs = useCssModule('zs')   // 命名的module
console.log(csszs);

/*
    vue3集成tailWindCss , 这是基于postcss 解析的， 可以去tailWindCss官网
*/

/**
 * 另外：初始vite-vue项目   可以使用 npm init vue@latest 这样的方式 ， 这个方式会带很多模板
 */
</script>

<style scoped>
/* 全局样式设置 */
:global(div) {
    color: blue;
}
</style>

<style module>
.dd {
    color: green;
}
.border {
    border: 1px solid gray;
}
</style>
<!-- 自定义名字 -->
<style module="zs">
.dd {
    color: hotpink;
}
.border {
    border: 1px solid grey;
}
</style>